
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>介绍一下项目 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>介绍一下项目 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">在介绍项目背景时，需要从哪三个核心维度进行阐述？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在介绍项目背景与业务需求时，应阐述三个核心维度：1. 行业领域，即项目所属的行业；2. 项目目标，即项目的核心目的是什么；3. 业务挑战，即项目解决了哪些具体的业务难题。</div>
          </div>
          <div class="card-source">来源: 1. 项目背景与业务需求</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">架构</div>
          <div class="card-question">在描述项目技术栈与架构设计时，应重点突出哪三个方面来展示技术决策能力？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">架构</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">应重点突出三个方面：1. 技术选型，说明选用了哪些关键技术及其原因；2. 架构设计，阐述整体架构（如微服务、单体）以及如何实现高可用、可扩展等特性；3. 设计模式，列举项目中为解决特定问题而使用的设计模式。</div>
          </div>
          <div class="card-source">来源: 2. 技术栈与架构设计</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">文档中提到的，在电商订单管理模块中，为解决高并发下的库存准确性问题，采用了哪两种技术手段？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">为了保证高并发情况下库存的准确性，文档示例中提到了两种技术手段：引入 Redis 分布式锁和采用队列进行削峰。</div>
          </div>
          <div class="card-source">来源: 3. 核心模块与功能实现</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">实践</div>
          <div class="card-question">当讨论项目中的性能优化时，应该从哪三个层面展开说明？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">实践</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">应该从三个层面展开说明：1. 性能瓶颈，识别出项目中曾遇到的性能问题；2. 优化手段，具体说明采取的优化方法，如SQL优化、缓存策略等；3. 监控方案，介绍用于监控系统的工具或框架，如Prometheus、Grafana等。</div>
          </div>
          <div class="card-source">来源: 4. 性能优化与监控</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">软技能</div>
          <div class="card-question">在展示团队协作与项目管理能力时，应着重介绍哪些方面？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">软技能</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">应着重介绍三个方面：1. 团队分工，说明自己在团队中的角色以及如何协作；2. 敏捷开发，描述项目采用的开发流程（如Scrum）；3. 沟通与协调，阐述如何与产品、测试、运维等团队进行有效沟通。</div>
          </div>
          <div class="card-source">来源: 5. 团队协作与项目管理</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">方法论</div>
          <div class="card-question">在对项目进行总结时，应包含哪两部分核心内容？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">方法论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">总结项目时应包含两部分核心内容：1. 项目成果，说明项目是否达到预期目标，并带来了哪些业务价值或技术突破；2. 经验教训，反思从项目中获得的学习和成长，以及未来可改进之处。</div>
          </div>
          <div class="card-source">来源: 6. 项目成果与反思</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在文档的技术栈示例中，Spring Cloud微服务架构依赖了哪些组件来实现服务发现、网关、负载均衡和异步消息处理？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">示例中提到，使用Eureka进行服务注册与发现，Zuul作为网关，Ribbon实现负载均衡，并利用Kafka来实现异步消息处理。</div>
          </div>
          <div class="card-source">来源: 2. 技术栈与架构设计</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">为了保证微服务架构中跨服务事务的数据一致性，文档的示例中提到了哪种具体的分布式事务模式？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档示例中提到，为了保证数据一致性，使用了分布式事务管理，并结合了TCC（Try-Confirm-Cancel）模式来处理跨服务的事务。</div>
          </div>
          <div class="card-source">来源: 3. 核心模块与功能实现</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">文档示例中，为解决订单处理响应延迟的性能瓶颈，具体采取了哪些数据库和缓存层面的优化手段？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">具体采取的优化手段包括：1. 通过分析数据库执行计划，对复杂查询进行了索引优化和SQL语句结构调整；2. 增加了Redis作为二级缓存，以大幅降低数据库的访问压力。</div>
          </div>
          <div class="card-source">来源: 4. 性能优化与监控</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
